<template>
  <el-dialog v-model="visible" title="批量设置权限" width="500px">
    <div class="batch-permission-container">
      <el-radio-group v-model="visibility">
        <el-radio-button label="public">
          <div class="permission-option">
            <el-icon size="20"><global /></el-icon>
            <div>
              <div class="permission-title">对外公开</div>
              <div class="permission-desc">所有用户均可访问</div>
            </div>
          </div>
        </el-radio-button>
        
        <el-radio-button label="internal">
          <div class="permission-option">
            <el-icon size="20"><lock /></el-icon>
            <div>
              <div class="permission-title">对内公开</div>
              <div class="permission-desc">仅内部用户可访问</div>
            </div>
          </div>
        </el-radio-button>
      </el-radio-group>

      <div class="batch-hint">
        <el-icon><info-filled /></el-icon>
        <span>将更新 {{ selectedIds.length }} 个文档的权限设置</span>
      </div>
    </div>

    <template #footer>
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="confirm">确认</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref,watch } from 'vue'
import { batchUpdateVisibility } from '@/api/document'
import { ElMessage } from 'element-plus'

const props = defineProps({
  modelValue: Boolean,
  selectedIds: {
    type: Array,
    default: () => []
  }
})

const emit = defineEmits(['update:modelValue', 'success'])

const visible = ref(false)
const visibility = ref('internal')

watch(() => props.modelValue, (val) => {
  visible.value = val
})

watch(visible, (val) => {
  emit('update:modelValue', val)
})

const confirm = async () => {
  try {
    await batchUpdateVisibility({
      ids: props.selectedIds,
      visibility: visibility.value
    })
    ElMessage.success('批量设置权限成功')
    emit('success')
    visible.value = false
  } catch (error) {
    console.log(error);
    
    // ElMessage.error('批量设置权限失败')
  }
}
</script>

<style scoped>
.batch-permission-container {
  padding: 20px;
}

.permission-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
}

.permission-title {
  font-weight: bold;
  margin-bottom: 4px;
}

.permission-desc {
  font-size: 12px;
  color: var(--el-text-color-secondary);
}

.batch-hint {
  margin-top: 20px;
  padding: 10px;
  background-color: var(--el-color-info-light-9);
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}
</style>